<template>
	<view class="u-page u-share-page">
		<view class="head">
			<view class="imgs flex">
				<view class="img-warp col center">
					<view class="img"> </view>
				</view>
				<view class="img-warp col center">
					<view class="img"> </view>
				</view>
			</view>
		</view>
		<canvas type="2d" :style="{ width:width + 'px' , height: height + 'px' }" id="myQrcode"  
		:width="width"
        :height="height"></canvas>
		<tabBar />
	</view>
</template>

<script>
	/*
	 http://house-detective.oss-cn-guangzhou.aliyuncs.com/center-bg.png
	 后端图不全 以及 getSystemInfoSync() 获取设备宽度有误差 
	 https://blog.csdn.net/qq_42543264/article/details/116982118
	*/
	import drawQrcode from 'weapp-qrcode-canvas-2d'
	export default {
		name: "desc",
		data() {
			return {
                width:300,
				height:500,
			};
		},
		created() {
			
			// https://uniapp.dcloud.io/api/system/info.html
            var { screenWidth, screenHeight, windowWidth, windowHeight,devicePixelRatio } = uni.getSystemInfoSync()
			this.pixelRatio =  devicePixelRatio; 
			this.width = uni.upx2px(750) * this.pixelRatio;
			this.height = uni.upx2px(448) * this.pixelRatio;
			
			console.log("加载", this.height ,this.width  );
				
			console.log("加载的系统信息=", { devicePixelRatio,screenWidth, screenHeight, windowWidth, windowHeight }  );
			this.width =  screenWidth
			this.height =  screenWidth
			this.load()
		},
		methods: {
			async load() {
				var th = this;
				var api = await this.ajax('/wx/property/sharePersonalCenter')
				console.log("base64=", api);
				const query = wx.createSelectorQuery()

				query.select('#myQrcode').fields({
					node: true,
					size: true
				}).exec(async (res) => {
					var canvas = res[0].node
					var img = canvas.createImage();
					img.src = api.data
					img.onload = function() {
						var options = {
							canvas: canvas,
							canvasId: 'myQrcode',
							width: th.width,
							height: th.height,
							padding: 0,
							paddingColor: '#fff',
							background: '#fff',
							foreground: '#000000',
							text: 'https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d',
							image: {
								imageResource: img,
								width: th.width,
								height: th.height,
								round: false,
							}
						}
						drawQrcode(options)
						wx.canvasToTempFilePath({
							x: 0,
							y: 0,
							width: th.width,
							height: th.height,
							destWidth: 600,
							destHeight: 600,
							canvasId: 'myQrcode',
							canvas: canvas,
							success(res) {
								console.log('二维码临时路径为：', res.tempFilePath)
							},
							fail(res) {
								console.error(res)
							}
						})
					}

				})
			},
			a() {
				const query = wx.createSelectorQuery()

				query.select('#myQrcode').fields({
					node: true,
					size: true
				}).exec(async (res) => {
					var canvas = res[0].node
					var img = canvas.createImage();
					img.src = "http://house-detective.oss-cn-guangzhou.aliyuncs.com/center-bg.png"
					img.onload = function() {
						var options = {
							canvas: canvas,
							canvasId: 'myQrcode',
							width: 260,
							padding: 30,
							paddingColor: '#fff',
							background: '#fff',
							foreground: '#000000',
							text: 'https://gitee.com/WeiDoctor/weapp-qrcode-canvas-2d',
							image: {
								imageResource: img,
								width: 80,
								height: 80,
								round: true
							}
						}
						drawQrcode(options)
					}

				})
			}
		}
	}
</script>

<style lang="scss">
	.u-share-page {


		.head {
			font-size: 12px;
			color: #000;
			padding: 20px;
			border: 1px solid #DFDFDF;
			margin: 5px;
			border-radius: 4px;
			background: url(http://house-detective.oss-cn-guangzhou.aliyuncs.com/share-top.png) center center / 100% 100%;
		}

		.imgs {
			justify-content: center;
			margin-top: 20px;
		}

		.img {
			width: 100px;
			height: 100px;
			border-radius: 50%;
			margin: 10px;
		}

		.info-imgs {
			align-items: center;
		}

		.infos {
			margin-top: 40px;
			background-color: #444444;
			flex: 1;
			color: #ccc;
		}


	}
</style>
